<template>
    <div>
        <div class="time" style="margin-top:60px;">
            <div style="margin-left:16px; font-size: 30px;">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item style=" font-size: 17px;">当前位置：首页</el-breadcrumb-item>
                    <el-breadcrumb-item style=" font-size: 17px;">接单管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div style="margin-right:16px">{{ date | formatDateTime }}</div>
        </div>
        <!-- 中间路由 -->
        <div style="margin: 20px 0;">
            <el-tabs type="border-card" v-model="activeName">
                <el-tab-pane label="用户管理" name="first">
                    <el-table style="width:100%" :data="tableData">
                        <el-table-column label="序号" prop="id"></el-table-column>
                        <el-table-column label="保单号" prop="user"></el-table-column>
                        <el-table-column label="被保险人" prop="sum"></el-table-column>
                        <el-table-column label="起保日期" prop="start"></el-table-column>
                        <el-table-column label="终止日期" prop="end"></el-table-column>
                        <el-table-column label="投保人" prop="sumto"></el-table-column>
                        <el-table-column label="投保日期" prop="data"></el-table-column>
                        <el-table-column label="保单状态" prop="state"></el-table-column>
                        <el-table-column label="服务阶段" prop="planstart" style="width:160px"></el-table-column>
                        <el-table-column label="服务状态" prop="planend" style="width:160px"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)"
                                    plain>查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 分页 -->
                <div class="block" style="text-align:center; margin-top: 10px;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import Span from "../parts/span.vue";
import Distribution from "../parts/distribution.vue";

export default {
    components: {
        Distribution,
        Span
    },

    data() {
        return {
            currentPage4: 1,
            date: new Date(),
            activeName: "first",
            tableData: [
                {
                    id: "1",
                    user: "PZFS21330205000000000255",
                    sum: "慈溪市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "2",
                    user: "PZFS21330205000000000255",
                    sum: "慈溪市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "3",
                    user: "PZFS21330205000000000255",
                    sum: "余姚市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "未在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "4",
                    user: "PZFS21330205000000000255",
                    sum: "余姚市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "5",
                    user: "PZFS21330205000000000255",
                    sum: "余姚市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "未在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },
                {
                    id: "6",
                    user: "PZFS21330205000000000255",
                    sum: "余姚市胜山平平五金配件厂",
                    start: "2021-11-25",
                    end: "2021-11-27",
                    sumto: "7",
                    data: "	2021-11-24",
                    state: "未在保",
                    planstart: "-",
                    planend: "-",
                    monitor: "未超期",
                },

            ],
        };
    },
    // 右上方时间显示
    filters: {
        formatDateTime(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "年" + MM + "月" + d + "日" + h + ":" + m + ":" + s;
        }
    },
    created() {
    },
    mounted() {
        var that = this;
        this.timer = setInterval(() => {
            that.date = new Date(); //修改数据date
        }, 1000);
    },
    watch: {
        $route(to, from) {
            // 判断跳转的路径是否你要监听的路径，我这里为 '/search'
            if (to.path == "/0") {
                // 通过路径获取新的 keywords 值
                let param = to.query.keywords;
                // 通过新的参数值获取新的数据
                // this.getdata(param);
                console.log("index.watch", this.param);
            }
        }
    },
    methods: {

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //   ToDo   
        handleEdit(index, row) {
            console.log(index, row);
        },


    },
    computed: {},
}
</script>
<style >
.time {
    font-size: 16px;
    line-height: 30px;
    color: rgb(102, 102, 102);
    display: flex;
    justify-content: space-between;
}

.content {
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
}

.el-tabs {
    width: 98%;
    margin: auto;
}

.el-tabs__item {
    font-size: 15px;
}

.tail {
    margin: 20px 0;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 6px rgb(15 86 179 / 10%);
}
</style>